<template>
    <topMenu ref="rightMenuRef"></topMenu>
    <div class="wrapper-box">
        <el-tabs v-model="activeName" class="demo-tabs padding-lr-sm" @tab-click="handleClick">
            <el-tab-pane label="我的绘画记录" name="first">
                <div class="record-view">
                    <div class="record-list flex flex-wrap padding-left">
                        <el-card v-for="(item,index) in listData" :key="index" :body-style="{ padding: '0px' }"
                                 class="record-items margin-right-sm margin-top">
                            <div class="image-box flex" @click="toDetail(item)">
                                <img :src="item.thumb_image_url[0]" class="image"/>
                            </div>
                            <div class="padding-xs">
                                <div class="margin-bottom-xs flex align-center justify-between">
                                    <div>{{ item.title }}</div>
                                    <div class="flex align-center">
                                        <div class="flex align-center">
                                            <el-icon class="margin-right-5" color="#000" size="16">
                                                <PictureFilled/>
                                            </el-icon>
                                            {{ item.image_url.length }}
                                        </div>
                                        <el-popover placement="bottom">
                                            <template #reference>
                                                <el-icon class="margin-left-xs">
                                                    <MoreFilled/>
                                                </el-icon>
                                            </template>
                                            <template #default>
                                                <el-button type="danger" @click="handleDel(item.id)">删除</el-button>
                                            </template>
                                        </el-popover>
                                    </div>
                                </div>
                                <div class="flex align-center justify-between">
                                    <div>{{ item.created_at }}</div>
                                    <el-tag v-if="item.status==0" type="info">等待中</el-tag>
                                    <el-tag v-else-if="item.status==1" type="success">处理成功</el-tag>
                                    <el-tag v-else-if="item.status==2" type="danger">处理失败</el-tag>
                                    <el-tag v-else-if="item.status==3" type="warning">结束</el-tag>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-if="listData&&listData.length>0" class="flex justify-center margin-tb">
                        <el-pagination v-model:current-page="paramsData.page" v-model:page-size="paramsData.page_count"
                                       :total="total" background layout="prev, pager, next"
                                       @current-change="handleCurrentChange"/>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup="">
    import topMenu from '../../components/topMenu.vue'
    import {onMounted, reactive, ref} from 'vue'
    import type {TabsPaneContext} from 'element-plus'
    import {drawRecord, drawRecordDel} from "../../http/user";
    import {useRouter} from "vue-router";
    import {ElMessage} from "element-plus";

    const router = useRouter()

    const activeName = ref('first')

    let paramsData = reactive({
        page: 1,
        page_count: 10
    })
    const listData = ref([])
    const total = ref(null);

    const getList = () => {
        drawRecord(paramsData).then(res => {
            const {data} = res;
            console.log("drawRecord", data)
            total.value = data.total
            let list = data.data
            if (list) {
                list.map(item => {
                    let prompt = item.origin_prompt
                    let promptArr = prompt.split(',');
                    console.log("promptArr", promptArr)
                    item.title = promptArr[0]
                })
                listData.value = list
            }
        })
    }

    onMounted(() => {
        console.log("123")
        getList();
    })

    //查看详情
    const toDetail = (item) => {
        router.push({
            path: '/recordDetail',
            query: {
                id: item.id
            }
        })
    }

    //删除列表记录
    const handleDel = (id) => {
        console.log("id", id)
        drawRecordDel({id: id}).then(res => {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            paramsData.page = 1;
            listData.value = []
            getList();
        })
    }

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }

    //分页当前第几页修改
    const handleCurrentChange = (val) => {
        console.log(`当前页: ${val}`)
        paramsData.page = val
        getList()
    }
</script>

<style lang="scss" scoped>

  .el-button {
    width: 100% !important;
  }

  .record-view {
    .record-list {
      .record-items {
        width: 5.733rem;

        .image-box {
          cursor: pointer;
          width: 100%;
          height: 5.333rem;

          .image {
            width: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }
</style>
